import { defineComponent } from 'vue'

export default defineComponent({
  name: 'tabsComponent',
  props: {
    options: {
      type: Array<any>,
      required: true,
    },
    gap: {
      type: Number,
      default: 6,
    },
    align: {
      type: String,
      default: 'center',
    },
    justify: {
      type: String,
      default: 'space-between',
    },
  },
  setup({ options, gap, align, justify }) {
    return () => (
      <>
        <a-flex justify={justify} align={align} gap={gap}>
          {options.map((i) => (
            <div class="w-88px h-28px flex flex-items-center flex-justify-center">{i.label}</div>
          ))}
        </a-flex>
      </>
    )
  },
})
